<template>
	<view class="integral-sign-in">
		<!-- 导航栏 -->
		<nav-bar></nav-bar>
		<!-- 背景 -->
		<view class="integral-sign-in-bg">
			<view class="integral-sign-in-bg-text">我的积分</view>
			<view class="integral-sign-in-bg-num" @click="toIntegraList">
				<text>1280</text>
				<icon class="icon-WDJFNUM"></icon>
			</view>
		</view>
		<view class="padding-case">
			<!-- 签到盒子 -->
			<view class="integral-sign-case">
				<view class="integral-sign-case-btitle">已累积签到1天</view>
				<view class="integral-sign-case-stitle">每周一重置1天</view>
				<view class="integral-sign-case-list">
					<view class="integral-sign-case-item" v-for="(item, index) in list" :key="index">
						<!-- <icon class="icon-YQUANDAO"></icon> -->
						<icon class="icon-WQUANDAO"></icon>
						<!-- <icon class="icon-ZQUANDAO"></icon> -->
						<text>已签到</text>
						<text>+10</text>
					</view>
				</view>
			</view>
			<!-- 签到按钮 -->
			<button class="signIn-btn" :class="{ 'signIn-btn-ccc': false }" @click="onSignIn">签到</button>
		</view>
		<!-- 签到成功弹出框 -->
		<uni-popup ref="popup" :mask-click="false" type="center">
			<view class="signIn-success-popup">
				<icon class="icon-CLOSEPOPUP" @click="closePopup"></icon>
				<view class="signIn-success-topbg"></view>
				<view class="signIn-success-bottom">
					<text class="signIn-success-txt1">签到成功</text>
					<view class="signIn-success-txt2">
						获得
						<text>10</text>
						积分，已连续签到
						<text>1</text>
						天
					</view>
					<button class="signIn-success-btn" @click="closePopup">知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import NavBar from '../components/navBar/navBar.vue';
export default {
	components: {
		NavBar
	},
	data() {
		return {
			list: [1, 2, 3, 4, 5, 6, 7]
		};
	},
	methods: {
		// 跳转积分列表
		toIntegraList() {
			uni.navigateTo({
				url: `/pagesIntegral/integralList/integralList`
			});
		},
		// 签到
		onSignIn() {
			this.$refs.popup.open();
		},
		// 关闭弹出层
		closePopup() {
			this.$refs.popup.close();
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.integral-sign-in {
	.integral-sign-in-bg {
		height: 416rpx;
		padding: 160rpx 32rpx 0;
		box-sizing: border-box;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-backgrond1.png) no-repeat;
		background-size: cover;
		.integral-sign-in-bg-text {
			font-size: 28rpx;
			color: #ffffff;
			line-height: 40rpx;
			margin-bottom: 16rpx;
		}
		.integral-sign-in-bg-num {
			display: flex;
			align-items: center;
			font-size: 72rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 84rpx;
			letter-spacing: 2rpx;
			.icon-WDJFNUM {
				width: 24rpx;
				height: 24rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-num786.png) no-repeat;
				background-size: cover;
				margin-left: 16rpx;
			}
		}
	}
	.padding-case {
		padding: 0 32rpx;
		margin-top: -80rpx;
		.integral-sign-case {
			padding: 72rpx 52rpx 140rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 64rpx;
			.integral-sign-case-btitle {
				font-size: 40rpx;
				font-weight: 600;
				color: #333333;
				line-height: 56rpx;
				margin-bottom: 26rpx;
				text-align: center;
			}
			.integral-sign-case-stitle {
				font-size: 24rpx;
				color: #666666;
				line-height: 32rpx;
				margin-bottom: 78rpx;
				text-align: center;
			}
			.integral-sign-case-list {
				display: flex;
				flex-wrap: wrap;
				margin-right: -44rpx;
				.integral-sign-case-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #999999;
					margin-right: 44rpx;
					margin-bottom: 74rpx;
					&:nth-last-of-type(-n + 5) {
						margin-bottom: 0;
					}
					& > icon {
						width: 80rpx;
						height: 84rpx;
						margin-bottom: 20rpx;
					}
					.icon-YQUANDAO {
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-qiandao2.png) no-repeat center center;
						background-size: cover;
					}
					.icon-WQUANDAO {
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-qiandao1.png) no-repeat center center;
						background-size: cover;
					}
					.icon-ZQUANDAO {
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-qiandao3.png) no-repeat center center;
						background-size: cover;
					}
					& > text:nth-of-type(1) {
						margin-bottom: 12rpx;
					}
				}
			}
		}
		.signIn-btn {
			width: 100%;
			height: 80rpx;
			background: #34d1a9;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #f5faff;
			line-height: 80rpx;
		}
		.signIn-btn-ccc {
			background: #cccccc;
		}
	}
	.signIn-success-popup {
		// background: #FFFFFF;
		position: relative;
		.icon-CLOSEPOPUP {
			width: 40rpx;
			height: 40rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-qd-popup-close.png) no-repeat;
			background-size: cover;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.signIn-success-topbg {
			width: 560rpx;
			height: 180rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jf-qd-popup-bg.png) no-repeat;
			background-size: cover;
		}
		.signIn-success-bottom {
			padding: 54rpx 0 40rpx;
			background: #ffffff;
			border-radius: 0 0 16rpx 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.signIn-success-txt1 {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 24rpx;
			}
			.signIn-success-txt2 {
				font-size: 24rpx;
				color: #858585;
				line-height: 32rpx;
				margin-bottom: 58rpx;
				& > text {
					color: #34d1a9;
				}
			}
			.signIn-success-btn {
				width: 420rpx;
				height: 88rpx;
				background: #34d1a9;
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 88rpx;
			}
		}
	}
}
</style>
<style>
page {
	background: #f5f7fa;
}
</style>
